<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>list users</title>
<LINK REL="SHORTCUT ICON" HREF="<%=basePath %>web/images/e5/logo.jpg">
<link rel="stylesheet" href="<%=basePath%>web/css/base.css" />
<script type="text/javascript"
	src="<%=basePath%>web/js/jquery-1.4.4.min.js"></script>
<style>
#demo table tr{
	line-height: 30px;
	border: 1px dashed #ccc
}
#demo table td{
border:1px dashed #ccc;
}

#data:hover {
	line-height: 40px;
	border: 2px solid #ccc;
	background: #F4F5F7
}
</style>
</head>
<body>
	<div id="d_head">
		<h1>
			Hi,<a title="" href="#">${sessionScope.accountInfo.userID }</a>
		</h1>
		<h2>
			<span><a title="List Users" href="<%=basePath%>quit.action">Log
					out</a> </span>
		</h2>
	</div>
	<div class="return"></div>
	<!--DEMO start-->
	<div id="demo">
		<fieldset>
		<div id="addbtn" class="add-btn">Add</div>
		<div id="edit-btn" class="add-btn">Edit</div>		
			<legend style="font-size:20px; font-weight:bold" align="center" >User Profile</legend>
			<table>
				<tr style="font-weight: bold">
					<td>Select</td>
					<td>First Name</td>
					<td>Last Name</td>
					<td>Title</td>
					<td>User Authority</td>
					<td align="center">Delete</td>

				</tr>
				<s:iterator value="userlist" var="user" step="1">
					<tr id="data">
						<td><input type="checkbox"  name="userchecked"
							value="<s:property value="#user.id"/>" />
						</td>
						<td><s:property value="#user.firstName"></s:property>
						</td>
						<td><s:property value="#user.lastName"></s:property>
						</td>
						<td><s:property value="#user.title"></s:property>
						</td>
						<s:set name="technologyName" value="#user.userAuth"/>
						<td><s:if test="%{#technologyName==1}">
							Superuser
							</s:if> 
							<s:elseif test="%{#technologyName==2}">
		 					Administrator
						  </s:elseif>
						  	<s:elseif test="%{#technologyName==3}">
		 				Domestic Consumer
						  </s:elseif>
						</td>
						<td align="center"><span class="x"  id='span<s:property value="#user.id"/>'>X</span></td>
					</tr>
				</s:iterator>
			</table>

		</fieldset>

	</div>
	<div id="footer" style="margin-top:200px" class="pa tc pb5">E5 systems &copy;2012</div>
	</body>
	<script type="text/javascript">
		$(document)
				.ready(
						function() {
							$("tr").css('cursor', 'pointer');
							$("input[name='userchecked']").unbind('click');
							$("tr").click(function(){
								var usercheck = $(this).find("input[name='userchecked']");
								if(usercheck.attr("checked")==true){
									usercheck.attr("checked",false);
								}else {
									usercheck.attr("checked",true);
								}
							});
							$("#addbtn").click(function(){								
								location.href="<%=basePath%>web/signup.jsp";
							});
							//eidt a user 
							$("#edit-btn")
									.click(
											function() {
												if ($("input[name='userchecked']:checked").length == 0) {
													alert("Please select one user to edit.");
												} else if ($("input[name='userchecked']:checked").length > 1) {
													alert("Only one user should be selected to edit.");
												}else{
													location.href="edituser.action?userId="+$("input[name='userchecked']:checked").val(); 									

												}
												;
											});
							//del a user 
							$(".x")
									.click(
											function() {
												if (confirm("Do you really want to delete the user?")==false) {
													return false;
												}else{
													
												}
												var $params = "userid="
														+ $(this).attr("id")
																.substring(4);
												var elemid = $(this).attr("id");
												$
														.ajax({
															url : "deleteuser.action",
															type : 'post',
															data : $params,
															dataType : "json",
															timeout : 2000,
															success : function(
																	data) {
																if (data.isDel) {
																	$(
																			"#"
																					+ elemid)
																			.parent(
																					"td")
																			.parent(
																					"tr")
																			.hide(
																					1000);
																} else {
																	alert("not de");

																}

															},
															error : function() {
																alert("error");
															}
														});

											});
						});
	</script>
</html>